<!--  -->
<template>
  <div>
    <!-- 两端对齐 -->
    <van-row class="title_div" type="flex" justify="space-between">
      <van-col span="5">
        <img class="logo" src="../assets/logo-img.png" alt />
      </van-col>
      <van-col span="15" class="search_div" @click="searchBtnFn">
        <van-icon name="search" size=".5rem" />
        <span>搜索商品</span>
      </van-col>
      <van-col span="3">
        <van-button class="loginBtn" size="mini">登录</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    searchBtnFn() {
      this.$router.push('/search');
    }
  }
};
</script>

<style lang='less' scoped>
.title_div {
  padding: 0.23rem 0.2rem 0.23rem 0.4rem;
  > * {
    // position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    > * {
      //   position: absolute;
      //   top: 50%;
      //   left: 50%;
      //   transform: translate(-50%, -50%);
    }
  }
  .logo {
    width: 1.84rem;
    height: 0.53333rem;
  }
  .search_div {
    height: 0.74667rem;
    font-size: 0.37333rem;
    background-color: #ededed;
    border-radius: 0.10667rem;
  }
  .loginBtn {
    width: 0.98667rem;
    height: 0.53333rem;
    line-height: 0.53333rem;
    text-align: center;
    color: #dd1a21;
    border: 1px solid #dd1a21;
    border-radius: 0.10667rem;
    //   margin-left: 0.21333rem;
    font-size: 0.32rem;
  }
}
</style>
